<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>水印测试</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>

<body>
<div id="map"></div>


<script>

    function updateInfo() {

        let watermarkFeatures = []

        let bounds = this.map.getBounds()

        let extent = {
            xmin: bounds._sw.lng,
            ymin: bounds._sw.lat,
            xmax: bounds._ne.lng,
            ymax: bounds._ne.lat
        }

        let zoom = Math.floor(this.map.getZoom())
        let rowAndColumn = egisV2.util.TileUtil.getVecTileData(extent, zoom)
        //请求每一个切片
        for (let rowIndex = rowAndColumn.row.min; rowIndex <= rowAndColumn.row.max; rowIndex++) {
            for (let columnIndex = rowAndColumn.column.min; columnIndex <= rowAndColumn.column.max; columnIndex++) {
                let cPoint = egisV2.util.DataUtil.getTileCenter(zoom, rowIndex, columnIndex)
                watermarkFeatures.push({
                    type: "Feature",
                    geometry: {
                        type: "Point",
                        coordinates: cPoint
                    },
                    properties: {}
                })

            }
        }
        return watermarkFeatures


    }

    function initPage() {
        map.showTileBoundaries = true
        map.addLayer({
            id: 'watermark-layer',
            type: "symbol",
            source: {
                type: "geojson",
                data: {
                    type: "FeatureCollection",
                    features: []
                }
            },
            layout: {
                "text-field": "电网GIS平台",
                "text-font": ["Microsoft YaHei Regular"],
                "text-size": 48,
                "text-anchor": "center",
                "text-offset": [0, 0],
                "text-max-width": 15,
                "text-optional": true,
                "text-rotate":-45
            },
            paint: {
                "text-translate-anchor": "map",
                "text-color": "rgb(255,255,255)",
                "text-halo-color": "#d3d3d3",
                "text-halo-width": 1.5,
                "text-translate": [0, 0],
                "text-opacity":0.3
            }
        })
        map.on('moveend', e => {
            //计算切片中心点
            map.getSource('watermark-layer').setData({
                type: "FeatureCollection",
                features: updateInfo()
            })
        })

        map.getSource('watermark-layer').setData({
            type: "FeatureCollection",
            features: updateInfo()
        })
        mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
        initGridLayer()

    }

    window.onload = function () {
        loadGeoMap_ms(initPage)
    }


</script>
</body>
</html>
